<meta charset="utf-8" />
<script src="../lib/jquery.js"></script>
<script src="../lib/jquery-ui.js"></script>
<script src="02_constrain.js"></script>
<style>
#draggable {
	width: 150px;
	height: 150px;
	padding: 0.5em;
	border: 1px solid red;
}

#draggable2 {
	width: 150px;
	height: 150px;
	top: 200px;
	padding: 0.5em;
	border: 1px solid red;
	position: absolute;
}

#draggable3 {
	width: 150px;
	height: 150px;
	padding: 0.5em;
	border: 1px solid red;
}

#containment {
	width: 950px;
	height: 300px;
	margin: 200px;
	padding: 20px;
	border: 1px solid green;
}
</style>

<div id="draggable">
	<p>Drag me around x</p>
</div>
<div id="draggable2">
	<p>Drag me around y</p>
</div>
<div id="containment">
	<div id="draggable3">
		<p>Drag me around containment</p>
	</div>
</div>